<template>
  <div class="detail-wrapper">
    <div class="detail-main">
      <div class="detail-column">
        <div class="column-title">客户信息</div>
        <div class="column-content">
          <a-descriptions
            bordered
            :labelStyle="{ width: '120px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          >
            <a-descriptions-item label="客户">{{detailInfo.customer_name}}</a-descriptions-item>
            <a-descriptions-item label="客户编号">
              {{detailInfo.customer_id}}
              <img
                class="icon"
                src="/public/icons/common/icon-copy.png"
                alt=""
                @click="handleCopy(detailInfo.customer_id)"
              />
            </a-descriptions-item>
            <a-descriptions-item label="客户分类">{{ detailInfo.customer_type_name }}</a-descriptions-item>
            <a-descriptions-item label="状态">{{ detailInfo.customer_status_name }}</a-descriptions-item>
            <a-descriptions-item label="所在地区">{{ detailInfo.address }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">经销商信息</div>
        <div class="column-content">
          <a-descriptions
            bordered
            :labelStyle="{ width: '120px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          >
            <a-descriptions-item label="经销商">{{ detailInfo.dealer_name }}</a-descriptions-item>
            <a-descriptions-item label="销售">{{ detailInfo.sales_name }}</a-descriptions-item>
            <!-- <a-descriptions-item label="销售联系方式"
              >180****9651
              <img
                class="icon"
                v-if="!seePhone"
                src="/public/icons/common/icon-see-close.png"
                alt=""
                @click="handleChangeSee(1)"
              /><img
                v-else
                class="icon"
                src="/public/icons/common/icon-see-open.png"
                alt=""
                @click="handleChangeSee(1)"
              />
            </a-descriptions-item> -->
          </a-descriptions>
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">订单信息</div>
        <div class="column-content">
          <a-descriptions
            bordered
            :labelStyle="{ width: '120px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          >
            <a-descriptions-item label="合同开始日期"
              >{{ detailInfo.contract_begin_date }}</a-descriptions-item>
            >
            <a-descriptions-item label="合同期限">{{ detailInfo.contract_months }}个月</a-descriptions-item>
             <a-descriptions-item label="订单状态">{{ detailInfo.order_status_name }}个月</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">硬件</div>
        <div class="column-content">
          <a-descriptions
            bordered
            :labelStyle="{ width: '120px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 3, xl: 3, lg: 3, md: 1, sm: 1, xs: 1 }"
            v-for="device in deviceOptions"
          >
            <a-descriptions-item label="设备">{{ device.device.name }}</a-descriptions-item>
            <a-descriptions-item label="数量">{{ device.amount ? device.amount : 0 }}</a-descriptions-item>
            <!-- <a-descriptions-item label="状态">{{ device.device_status_id ? '正常' : '停用' }}</a-descriptions-item> -->
          </a-descriptions>
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">软件</div>
        <a-checkbox-group
          v-model:value="software"
          name="checkboxgroup"
          :options="softwareOptions"
          disabled
        />
      </div>
      <div class="detail-column">
        <div class="column-title">虚拟实验（已选{{experimentOptions.length}}）</div>

        <a-table class="table-inner"
          :columns="columns"
          :data-source="experimentOptions"
          rowKey="experiment_id"
        >
          <template v-if="column.dataIndex == 'ai_enabled'">
            <div class="status-text">
              {{ column.ai_enabled ? "已启用" : "未启用" }}
            </div>
          </template>
          <template v-if="column.dataIndex == 'virtual_enabled'">
            <div class="status-text">
              {{ column.virtual_enabled ? "已启用" : "未启用" }}
            </div>
          </template>
          <template v-if="column.dataIndex == 'twin_abled'">
            <div class="status-text">
              {{ column.twin_abled ? "已启用" : "未启用" }}
            </div>
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex == 'use_months'">
              <p>{{ record.use_months }}个月</p>
            </template>
          </template>
        </a-table>
      </div>
      <!-- <div class="detail-column">
        <div class="column-title">直播功能</div>
        <div class="column-content">
          <a-descriptions
            bordered
            :labelStyle="{ width: '120px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          >
            <a-descriptions-item label="剩余直播时长"
              >{{detailInfo.live_hours}}小时</a-descriptions-item
            >
          </a-descriptions>
        </div>
      </div> -->
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import API from "@/api/operation";
import SAPI from "@/api/system";
import api from "@/api";
import { message } from "ant-design-vue";
import { useRoute } from "vue-router";
const route = useRoute();
const query = computed(() => route.query);
const detailInfo = ref({});
const customerList = ref([]);
const dealerList = ref([]);
const deviceList = ref([]);
const deviceOptions = ref([]);
const softwareOptions = ref([]);
const software = ref([]);
const experimentOptions = ref([]);
const experiment = ref([]);
onMounted(async () => {
  api.apiCustomerOptionsPost({}).then((res) => (customerList.value = res.data));
  api.apiUserMyDealersPost({}).then((res) => (dealerList.value = res.data));
  
  if (query.value.id) {
    getData();
  }
})

const getData = async () => {
  let res = await api.apiOrderContractFetchModelPost({
    order_id: query.value.id
  })
  detailInfo.value = res.data;
  getCustomerInfo(res.data.customer_id);
  deviceOptions.value = res.data.devices;
  softwareOptions.value = res.data.apps.map(item => ({
    label: item.app.name,
    value: item.app_id,
  }));
  software.value = res.data.apps.map(item => item.app_id);
  experimentOptions.value = res.data.experiments.map(item => ({
    name: item.experiment.name,
    use_months: item.use_months ? item.use_months : 0,
    ai_enabled: item.experiment.ai_enabled ? "已启用" : "未启用",
    virtual_enabled: item.experiment.virtual_enabled ? "已启用" : "未启用",
    twin_abled: item.experiment.twin_abled ? "已启用" : "未启用",
  }));
  console.log(experimentOptions.value)
}

const handleCopy = (text) => {
  navigator.clipboard.writeText(text);
};

const columns = ref([
  {
    dataIndex: "name",
    title: "实验名称",
    width: 110,
    fixed: "left",
  },
  {
    dataIndex: "use_months",
    title: "使用期限",
    width: 110,
  },
  {
    dataIndex: "ai_enabled",
    title: "AI测评",
    width: 90,
  },
  {
    dataIndex: "virtual_enabled",
    title: "模拟仿真",
    width: 90,
  },
  {
    dataIndex: "twin_abled",
    title: "数字孪生",
    width: 90,
  },
]);

const getCustomerInfo = async (value) => {
  console.log('get customer_id:', value)
  let res = await api.apiCustomerFetchModelPost({ customer_id: value });
  detailInfo.value.dealer_id = res.data.dealer_id;
  detailInfo.value.sales_name = res.data.sales_name;
  detailInfo.value.no = res.data.no;
  detailInfo.value.customer_type_id = res.data.customer_type_id;
  detailInfo.value.customer_type_name = res.data.customer_type_name;
  detailInfo.value.customer_status_id = res.data.customer_status_id;
  detailInfo.value.customer_status_name = res.data.customer_status_name;
  detailInfo.value.city_id = res.data.city_id;
  detailInfo.value.address = `${res.data.province_name} ${res.data.city_name}`;
};
</script>
